import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaErrorPage, WeaDialog, WeaRightMenu, WeaNewScroll, WeaInput, WeaTextarea, WeaTools, WeaLocaleProvider, WeaInputNumber } from 'ecCom';
import { Row, Button, Spin, Col, Input, Modal, message } from 'antd';
import { observable, action, toJS } from 'mobx';
import AlertModal from '../../public/AlertModal';
import { WeaTableNew } from 'comsMobx';

const WeaTable = WeaTableNew.WeaTable;
const getLabel = WeaLocaleProvider.getLabel;

@inject('smsTempStore')
@inject('sendSmsStore')
@observer
class EditTemp extends React.Component {
	constructor(props) {
    	super(props);
	    this.state = {
			  visible: false,
			  tempTitle: '',
			  showindex: '',
			  tempText: '',
			  id: '',
	    };
	  }

	componentDidMount() {
	 }
	 componentWillReceiveProps(nextProps) {
		const { smsTempStore: { addWithMsg }, sendSmsStore: { msg } } = this.props;
		 this.setState({ visible: nextProps.visible });
		 let { dataid } = this.props.smsTempStore;
		 if (dataid) {
			 const { smsTempStore } = this.props;
			 smsTempStore.viewSms({ id: dataid }).then((data) => {
				 this.setState({
					 tempTitle: data.title,
					 showindex: data.showindex,
					 tempText: data.content,
					 id: data.id,
				 });
			 });
		 } else {
			 this.setState({
				 tempTitle: '',
				 showindex: '',
				 tempText: addWithMsg ? msg : '',
				 id: '',
			 });
		 }
	 }
    render() {
		let { dataid } = this.props.smsTempStore;
		let title = !dataid ? getLabel(518872, '添加短信模板') : getLabel(518873, '编辑短信模板');
		let titlecol = 8;
		let fieldcol = 15;
        return (
            <div className="" style={{ height: '100%' }}>
				{/*{this.state.isSingle &&*/}
				{/*	<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@0oyat2`} datas={}*/}
				{/*}*/}

			{this.state.visible && <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@ev8ghd`}
  visible={this.state.visible}
  title={title}
  icon="icon-coms-message"
  iconBgcolor="#0079de"
  className=""
  buttons={
									[<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@tghr00@saveBtn_WeaDialog`} type="primary" onClick={() => this.doSave()}>{getLabel(86, '保存')}</Button>,
									<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@5rqss2@closeBtn_WeaDialog`} type="ghost" onClick={() => { this.doClose(); }}>{getLabel(309, '关闭')}</Button>]
								}
  style={{ width: '605px', height: '335px' }}
  onCancel={this.doClose}
			>
				<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@ti2cmm`} datas={this.getRightMenu()} onClick={this.onRightMenuClick.bind(this)}>
					<div style={{ height: '100%', paddingTop: '30px' }} className="">

						<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@ncp3qt`} className="" style={{ height: '35px', marginBottom: '10px' }}>
							<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@xqhlj1`} span={titlecol} className={'temp-content-title'}>
								{getLabel(520503, '模板简称')}
							</Col>
							<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@bd8e7g`} span={fieldcol}>
								<span style={{ display: 'inline-block' }}>
									<WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@szxwui`}
  viewAttr={3}
  style={{ width: '300px' }}
  value={this.state.tempTitle || ''}
  helpfulTip={`${getLabel(20246, '文本长度不能超过')}90(${getLabel(124962, '1个中文字符等于3个长度')}`}
  onChange={value => this.onChange(value, 'tempTitle')}
									/>

								</span>
							</Col>
						</Row>
						<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@tmea8p`} className="" style={{ height: '35px', marginBottom: '10px' }}>
							<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ouudyb`} span={titlecol} className={'temp-content-title'}>
								{getLabel(15513, '显示顺序')}
							</Col>
							<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@vxke1z`} span={fieldcol} >
								<WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@00wes4`} style={{ width: '300px' }} value={this.state.showindex || '0'} step={0.1} precision={1} onChange={value => this.onChange(value, 'showindex')} />

							</Col>
						</Row>

						<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@mva9gx`} className="" style={{ height: '35px', marginBottom: '10px' }}>
							<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@nntvjw`} span={titlecol} className={'temp-content-title'}>
								{getLabel(18693, '模板内容')}
							</Col>
							<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@92uf0l`} span={fieldcol}>
								<WeaTextarea ecId={`${this && this.props && this.props.ecId || ''}_WeaTextarea@qblesi`} viewAttr={3} style={{ width: '300px' }} minRows={8} maxRows={8} value={this.state.tempText || ''} onChange={value => this.onChange(value, 'tempText')} />
							</Col>
						</Row>
					</div>
				</WeaRightMenu>
			  </WeaDialog>}

            </div>
        );
	}

	onChange = (values, type) => {
		
		if (type == 'tempTitle') {
			const vLength = this.realLength(values);
			if (vLength > 90) {
				values = this.trimSplace(values);
				const realV = this.checkLength(values, vLength, 90);
				this.setState({ [type]: realV });
				message.warning(`${getLabel(20246, '文本长度不能超过')}90(${getLabel(124962, '1个中文字符等于3个长度')})`);
			}else{
				this.setState({ [type]: values });	
			}
		} else {
			this.setState({ [type]: values });
		}
	}

	realLength = (str) => {
		let j = 0;
		for (let i = 0; i <= str.length - 1; i++) {
			j += 1;
			if ((str.charCodeAt(i)) > 127) {
				j += 2;
			}
		}
		return j;
	}

	checkLength =(str, strLen, elMaxLen) => {
		if (strLen <= elMaxLen) {
			return str;
		}

		let j = 0;
		for (let i = 0; i <= str.length - 1; i++) {
			j += 1;
			if ((str.charCodeAt(i)) > 127) {
				j += 2;
			}

			if (j > elMaxLen) {
				return str.substring(0, i);
			}

			if (j == elMaxLen) {
				return str.substring(0, i + 1);
			}
		}
		return str;
	}

	trimSplace = str => (typeof str === 'string' ? str.replace(/(^\s*)|(\s*$)/g, '') : str)

	doSave = () => {
		const { smsTempStore } = this.props;
		if (this.trimSplace(this.state.tempText) && this.trimSplace(this.state.tempTitle)
		&& this.trimSplace(this.state.tempText).length > 0
		&& this.trimSplace(this.state.tempTitle).length > 0) {
			smsTempStore.saveTemp(this.state).then((data) => {
				if (data.flag) {
					this.doRefresh();
				}
			});
			this.doClose();
		} else {
			AlertModal(getLabel(384148, '必填项不能为空！'));
		}
	}
    doClose =() => {
		this.props.doClose && this.props.doClose();
	}

	doRefresh =() => {
		this.props.doRefresh && this.props.doRefresh();
	}
	// 页面新增右键菜单 by iverson
	getRightMenu(){
		let btns = [];
		btns.push({
			key: "1",
			icon: <i className="icon-coms-Preservation" />,
			content: getLabel(86, '保存'),
		});
		btns.push({
			key:"2",
			icon: <i className="icon-coms-go-back" />,
			content: getLabel(309, '关闭'),
		});
		return btns;
	}
	onRightMenuClick(key){
		if (key === '1') {
			this.doSave();
		} else if (key === '2') {
			this.doClose();
		}
	}
}

export default EditTemp;
